<template>
  <!-- 公历农历日期选择器 -->
  <div>
    <el-dialog
      title="日期选择"
      :visible.sync="dialogVisible"
      width="480px"
      :show-close="false"
      :before-close="closeDailog"
      append-to-body
    >
      <Calendar v-model="date" :type.sync="thisType" />
      <span slot="footer" class="dialog-footer">
        <Button @click="closeDailog">取消</Button>
        <Button type="primary" @click="confrim">确定</Button>
      </span>
    </el-dialog>
    <el-input
      v-model="dateStr"
      :disabled="disabled"
      :placeholder="placeholder"
      @focus="dialogVisible = true"
    />
  </div>
</template>
<script>
import { transShowDate } from '@/utils/index.js'
import Calendar from '@/components/Calendar'
import Button from '@/components/Button'
export default {
  name: 'CalendarPicker',
  components: {
    Calendar,
    Button
  },
  props: {
    value: {
      type: [Object],
      default: () => { return { date: '', type: 'solar' } }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      dialogVisible: false,
      date: new Date(1991, 9, 9),
      thisType: 'solar',
      dateStr: ''
    }
  },
  watch: {
    value: {
      handler(nValue) {
        if (nValue.date) {
          this.date = nValue.date
          this.dateStr = transShowDate(nValue.date, nValue.type ? nValue.type : 'solar')
        } else {
          this.date = new Date(1991, 9, 9)
        }
        if (nValue.type) {
          this.thisType = nValue.type
        } else {
          this.thisType = 'solar'
        }
        if (!nValue.data && !nValue.type) this.dateStr = ''
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    closeDailog() {
      this.dialogVisible = false
    },
    // 确定
    confrim() {
      this.$emit('change', { date: this.date, type: this.thisType })
      this.$emit('input', this.date)
      this.$emit('update:type', this.thisType)
      this.closeDailog()
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
